$(function() {
				//加载页面的时候加载验证码
				var aCode="1234"
				$.ajax({
					type:"post",
					url:"/yanzhengma",
					async:false,
					success:function(data){
						aCode=data;
					}
				});
				//点击图片刷新
				var show_num=[];
				draw(show_num);
				$("#canvas").click(function(){
					var _this=$(this)
					$.ajax({
						type:"post",
						url:"/yanzhengma",
						async:false,
						success:function(data){
							aCode=data;
						}
					});
					draw(show_num);
				});
				//绘画的函数
				function draw(show_num){
					var canvas_width=$("#canvas").width();
					var canvas_height=$("#canvas").height();
					//获取到canvas对象
					var canvas=document.getElementById("canvas");
					//获取到canvas画图的环境
					var context=canvas.getContext("2d");
					canvas.width=canvas_width;
					canvas.height=canvas_height;
					//获取到后端返回回来的随机数的长度
					var aLength=aCode.length;
					for(var i=0; i<=3; i++){
						//获取随机的索引值
						var j=Math.floor(Math.random()*aLength);
						//产生0-30之间的随机弧度
						var deg=Math.random()*30*Math.PI/180;
						//得到一个随机内容
						var txt=aCode[i];
						//将随机数加到显示数组中
						show_num[i]=txt.toLowerCase();
						//文字在canvas上的x坐标
						var x=10+i*20;
						//文字在canvas上的y坐标
						var y=20+Math.random()*8;
						//设置字体类型
						context.font="bold 23px 微软雅黑";
						context.translate(x,y);
						context.rotate(deg);
						context.fillStyle=randomColor();//1
						context.fillText(txt,0,0);
						context.rotate(-deg);
						context.translate(-x,-y);	
					}
					//验证码上显示线条
					for(var i=0; i<=5;i++){
						context.strokeStyle=randomColor();//1
						context.beginPath();
						context.moveTo(Math.random()*canvas_width,Math.random()*canvas_height);
						context.lineTo(Math.random()*canvas_width,Math.random()*canvas_height);
						context.stroke();
					}
					//验证码上显示小点
					for(var i=0;i<=30;i++){
						context.strokeStyle=randomColor();
						context.beginPath();
						var x=Math.random()*canvas_width;
						var y=Math.random()*canvas_height;
						context.moveTo(x,y);
						context.lineTo(x+1,y+1);
						context.stroke();
					}
				}
				//得到随机的颜色值
				function randomColor(){
					var r=Math.floor(Math.random()*256);
					var g=Math.floor(Math.random()*256);
					var b=Math.floor(Math.random()*256);
					return "rgb(" + r + "," + g + "," + b + ")";
				}
				//登录功能实现
				$("#login").click(function() {
					//先进行前端验证
					if ($("#username").val() != "" && $("#password").val() != "") {
						if (aCode.toLowerCase() == $("#Captcha").val()||aCode.toUpperCase() == $("#Captcha").val()) {
							//如果信息都填写完整，然后就进行发送ajax请求给后端验证是否成功。
							$.post(
								"/user/login",
								{
									"username": $("#username").val(),
									"password": $("#password").val()
								},
								function(data) {
									if (data ==true) {
										cocoMessage.success("登录成功")
										//登录成功之后进行跳转。
										window.location.href = "/index.html";
									} else {
										$.ajax({
											type:"post",
											url:"/yanzhengma",
											async:false,
											success:function(data){
												aCode=data;
											}
										});
										console.log(aCode)
										draw(show_num);
										cocoMessage.error("用户名或密码错误")
									}
								}
							);
						} else if ($("#Captcha").val() == "") {
							cocoMessage.error("请填写验证码")
						} else {
							$.ajax({
								type:"post",
								url:"/yanzhengma",
								async:false,
								success:function(data){
									aCode=data;
								}
							});
							console.log(aCode)
							draw(show_num);
							cocoMessage.error("验证码有误")
						}
					} else {
						cocoMessage.error("请填写完整信息")
					}
				});
				//登录界面的提示信息
				$("#username").blur(function() {
					if ($("#username").val() == "") {
						$("#una").html("<small style='color:red'>用户名不能为空</small>")
						$("#username").css("border-color", "red");
					}
				});
				$("#username").focus(function() {
					$("#una").html("")
					$("#username").css("border-color", "");
				});
				$("#password").blur(function() {
					if ($("#password").val() == "") {
						$("#up").html("<small style='color:red;'>密码不能为空</small>")
						$("#password").css("border-color", "red");
					}
				});
				$("#password").focus(function() {
					$("#up").html("");
					$("#password").css("border-color", "");
				});
				//验证邮箱
				$("#email").keyup(function() {
					var $reg = /^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
					if (!$reg.test($("#email").val())) {
						$("#pemail").html("<small><font color='red'>邮箱格式错误！</font></small>");
						$("#email").css("border-color", "red");
						email = false;
					} else {
						$("#pemail").html("");
						$("#email").css("border-color", "");
						email = true;
					}
				});
				//验证用户名
				$("#uname").keyup(function() {
					var $reg = /^\w{6,}$/;
					if (!$reg.test($("#uname").val())) {
						$("#pUname").html("<small><font color='red'>用户名至少6位</font></small>");
						$("#uname").css("border-color", "red");
						uname = false;
					} else {
						$("#pUname").html("");
						$("#uname").css("border-color", "");
						uname = true;
					}
				});
				//验证密码
				$("#pwd").keyup(function() {
					var $reg = /^\w{6,}$/;
					if (!$reg.test($("#pwd").val())) {
						$("#pPwd").html("<small><font color='red'>密码至少6位</font></small>");
						$("#pwd").css("border-color", "red");
						pwd = false;
					} else {
						$("#pPwd").html("");
						$("#pwd").css("border-color", "")
						pwd = true;
					}
				});
				//验证密码确认框
				$("#ConfirmPwd").blur(function(){
					if($("#ConfirmPwd").val()==""){
						$("#pCPwd").html("<small><font color='red'>请填写确认密码！</font></small>")
						$("#ConfirmPwd").css("border-color", "red")
					}
				});
				$("#ConfirmPwd").focus(function(){
					$("#pCPwd").html("")
					$("#ConfirmPwd").css("border-color","")
				})
				//验证手机号
				$("#phone").keyup(function() {
					phone = false;
					//手机号的最新正则表达式。
					var $reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
					if (!$reg.test($("#phone").val())) {
						$("#pPhone").html("<small><font color='red'>手机号格式不正确！</font></small>")
						$("#phone").css("border-color", "red")
						phone = false;
					} else {
						$("#pPhone").html("");
						$("#phone").css("border-color", "")
						phone = true;
					}
				});
				//注册功能实现，
				$("#registe").click(function() {
					//验证填写的信息是否全部都合法
					//检查其中的信息是否有空
					if ($("#uname").val() != "" && $("#phone").val() != "" && $("#email").val() != "" && $(
							"#pwd").val() != "" && $("#uPwd").val() != "") {
						if (uname && phone && pwd && email) {
							if ($("#pwd").val() == $("#ConfirmPwd").val()) {
								//密码一致，发送ajax请求给后台
								$.post(
									"/user/register",
									{
										"username": $("#uname").val(),
										"password": $("#pwd").val(),
										"phone": $("#phone").val(),
										"email": $("#email").val()
									},
									function(data) {
										if(data.username!=null) {
											if (data.phone == $("#phone").val()) {
												cocoMessage.error("手机号已被注册")
												return;
											} else if (data.email == $("#email").val()) {
												cocoMessage.error("邮箱已被绑定过")
												return;
											}
										}
										else{
												cocoMessage.success("注册成功")
												//成功之后就关闭掉模态框。
												$("#uname").val("");
												$("#pwd").val("");
												$("#email").val("");
												$("#phone").val("");
												$("#ConfirmPwd").val("");
												$("#myModal").modal("hide")
											}
									},
									"json"
								);
							} else {
								cocoMessage.error("密码确认不一致")
							}
						} else {
							//信息填写不完整进行提示
							cocoMessage.error("请按照格式填写！")
						}
					} else {
						cocoMessage.error("请填写完整的信息")
					}
				});
				//不同的输入框的获得焦点，失去焦点来进行信息提示。
				$("#uname").blur(function() {
					if ($("#uname").val() == "" || $("#uname").val() == null) {
						$("#pUname").html("<small style='color:red;'>用户名不能为空</small>")
						$("#uname").css("border-color", "red");
					}
				});
				$("#uname").focus(function() {
					$("#uname").css("border-color", "");
					$("#pUname").html("")
				});
				$("#pwd").blur(function() {
					if ($("#pwd").val() == "") {
						$("#pPwd").html("<small style='color:red;'>密码不能为空</small>")
						$("#pwd").css("border-color", "red");
					}
				});
				$("#pwd").focus(function() {
					$("#pwd").css("border-color", "");
					$("#pPwd").html("")
				});
				$("#phone").blur(function() {
					if ($("#phone").val() == "") {
						$("#pPhone").html("<small style='color:red;'>手机号不能为空</small>")
						$("#phone").css("border-color", "red");
					}
				});
				$("#phone").focus(function() {
					$("#pPhone").html("")
					$("#phone").css("border-color", "");
				});
				$("#email").blur(function() {
					if ($("#email").val() == "") {
						$("#pemail").html("<small style='color:red'>邮箱不能为空</font>")
						$("#email").css("border-color", "red");
					}
				});
				$("#email").focus(function() {
					$("#pemail").html("")
					$("#email").css("border-color", "");
				});
				//密码不一致时进行提示
				$("#ConfirmPwd").keyup(function() {
					if ($("#pwd").val() !== $("#ConfirmPwd").val()) {
						$("#pCPwd").html("<small><font color='red'>密码填写不一致</font></small>")
						$("#ConfirmPwd").css("border-color","red");
					}
					if ($("#pwd").val() == $("#ConfirmPwd").val()) {
						$("#pCPwd").html("")
						$("#ConfirmPwd").css("border-color","")
					}
				});
				//重置注册表单中信息
				$("#resetInfo").click(function() {
					$("#uname").val("");
					$("#pwd").val("");
					$("#email").val("");
					$("#phone").val("");
					$("#ConfirmPwd").val("");
				});
				
			});
